<template>
	<view class="complet">
		<u-navbar :borderBottom="false" back-text=" " :title="title"></u-navbar>
		<scroll-view class="scroll-Y" scroll-y="true" >
			<view class="" style="padding: 32rpx; box-sizing: border-box;">
				<view v-for="(item,index) in infoList" :key="index" class="bag_item1">
					<view class="bag_item_head">
						<u-image border-radius="8" width="112rpx" height="112rpx"  :src="item.pic"></u-image>
						<view class="bag_item_head_right">
							<view class="bag_item_head_right_overflow">
								<view class="title_dan right_title">
									单号:
								</view>
								<view class="title_code right_text">
									{{item.code}}
								</view>
							</view>
							<view class="bag_item_head_right_overflow">
								<view class="title_dan_resmask right_title">
									包裹备注:
								</view>
								<view class="title_remark right_text">
									{{item.remark}}
								</view>
							</view>
						</view>
					</view>
					<view class="time">
						<span style="margin-right: 10rpx;">入库时间:</span>
						<span>{{item.add_time}}</span>
					</view>
				</view>
				
				<view class="fahuo margin_bottom" @click="fenHuo_pop_show=true" v-if="!isAction">
					<div  class="fahuo_top">
						<span class="fahuo_left">发货方式</span>
						<view class="fahuo_right">
							<span>{{type_text}}</span>
							<image style="width: 24rpx; height: 24rpx;margin-left: 8rpx;"
								src="https://www.mengkahuyu.com/index_png/back.png" mode=""></image>
						</view>
					</div>
				</view>
				<view class="wuPin_info">
					<view class="">
						<div class="wupin_choose_item_info">
							<div @click="open_pop('address_pop_show')" class="wupin_choose_item">
								<span>邮寄地址</span>
								<view class="choose_item_right">
									<view class="address_width">
										{{baoList[baoIndex].province?baoList[baoIndex].province+baoList[baoIndex].city+baoList[baoIndex].area+baoList[baoIndex].address:'请选择地址'}}
									</view>
									<image style="width: 24rpx; height: 24rpx;margin-left: 8rpx;"
										src="https://www.mengkahuyu.com/index_png/back.png" mode=""></image>
								</view>
							</div>
						</div>
						<image :src="img_url" style="width: 100%;" mode="widthFix"></image>
						<view style="width: 100%; height: 200rpx;">
				
						</view>
						<view class="button_submit">
							<u-button @click="submitForm(he_type)" class="btns"
								:custom-style="{'background':'#90c0ff' ,color:'#fff'}" :shape="'circle'" :hair-line="false"
								:ripple="true" ripple-bg-color="rgba(9, 82, 200, 0.15)">{{isAction?'再次完善':'添加'}}</u-button>
						</view>
					</view>
					
				</view>
			</view>
		</scroll-view>
		
		<!--发货方式弹出层 -->
		<u-popup v-model="fenHuo_pop_show" mode="bottom" border-radius="14">
			<view class="fahup_pop_box">
				<view class="fahup_pop_box_title">
					发货方式
				</view>
				<view @click="chooseshipments(item)" v-for="(item,index) in shipmentsList" :key="index"
					class="fahup_pop_box_item">
					{{item.text}}
				</view>
			</view>
		</u-popup>
		
		<!-- 邮寄地址列表 -->
		<u-popup v-model="address_pop_show" mode="bottom" border-radius="14">
			<view class="address_pop_box">
				<view class="address_pop_top">
					<view class="fahup_pop_box_title">
						选择邮寄地址
					</view>
					<view @click="toUrl('/pages/addAddresss/addAddresss')" class="addAddress">
						<image style="width: 24rpx; height: 24rpx;margin-right: 8rpx;"
							src="https://www.mengkahuyu.com/index_png/add_icon.png" mode=""></image>
						<span>添加收件人</span>
					</view>
				</view>
				<scroll-view class="scroll_y_address" scroll-y="true">
					<view class="scroll_padding">
						<view v-for="(ite,ind) in addressList" :key="ind"
							class="address_item">
							<view  @click="chooseAddress(ite ,ind)" class="address_left">

								<image v-if="ite.isChoose" style="width: 24rpx; height: 24rpx;"
									src="https://www.mengkahuyu.com/index_png/radio_choose.png" mode=""></image>
								<image v-else style="width: 24rpx; height: 24rpx;"
									src="https://www.mengkahuyu.com/index_png/radio.png" mode=""></image>
							</view>
							<view  @click="chooseAddress(ite ,ind)" class="address_center">
								<view class="centern_top">
									<span class="user_name">
										{{ite.name}}
									</span>
									<span class="user_phone">
										{{ite.phone}}
									</span>
								</view>
								<view class=" centern_top centern_center">
									{{ite.province}}
									{{ite.city}}
									{{ite.area}}
								</view>
								<view class="centern_center centern_top">
									{{ite.address}}
								</view>
							</view>
							<view @click="toUrl('/pages/addAddresss/addAddresss?id='+ite.id)" class="address_left">
								<image  style="width: 24rpx; height: 24rpx;"
									src="https://www.mengkahuyu.com/index_png/edit.png" mode=""></image>
							</view>

						</view>
					</view>

				</scroll-view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img_url:'',
				c_type:'',//国家1韩国2日本
				tuan_text: '', //团名输入框的内容
				goods_text: '', //商品名搜索框
				title: '包裹完善',
				transport_type: 0, //运输方式
				he_type:0 ,//发货方式
				type_text: '发货方式',
				infoList: [],
				info: { //提交的内容

				},
				radioList:[],//		增值服务列表
				baoList: [ //分包list
					{
						"address": null, //详细地址
						"province": null,
						"city": null,
						"area": null,
						"idcode": null, //身份证号
						"name": null,
						"phone": null,
						clearance_type:null,
					}
				],
				baoIndex: 0, //第几个包
				goodsIndex: 0, //当前是第几个商品
				goodsList: [], //商品信息
				goodsNameList: [], //商品名列表
				id: null,
				shipmentsList: [ //发货方式
					// 1CJ海运 2CJ空运 3EMS海运 4EMS空运 
					{text:'CJ海运' , type:1 , pic:'https://www.mengkahuyu.com/index_png/cj_haiyun.png'},
					{text:'CJ空运' , type:2 , pic:'https://www.mengkahuyu.com/index_png/cj_kongyun.png'},
					{text:'EMS海运' , type:3 , pic:'https://www.mengkahuyu.com/index_png/ems_haiyun.png'},
					{text:'EMS空运' , type:4 , pic:'https://www.mengkahuyu.com/index_png/ems_kongyun.png'},
				],
				idArr:[],//商品id数组
				tuanList: [], //团名品牌列表
				addressList: [], //地址列表
				fenHuo_pop_show: false,
				tuan_pop_show: false, //团名品牌弹出层
				goods_pop_show: false, //商品名列表
				address_pop_show: false, //选择地址弹出层
				isAction:false,//是否再次完善信息
			}
		},
		onLoad(data) {
			this.c_type = data.type //国家信息
			this.idArr = data.id.split(',')
			this.id =  data.id
			if(data.isAction){
				this.isAction = data.isAction
				this.getInfo()
			}
			if(this.idArr.length>1){
				// 合箱
				this.he_type = 4
			}else{
				// 原箱
				this.he_type = 1
			}
		},
		onShow() {
			this.getList()
			this.getAddressList()
		},
		
		methods: {
			inputChange(e, index ,key){
				this.$nextTick(()=>{
					this.baoList[index][key] = this.$geShi(e.detail.value)
				})
			},
			inputChange2(e, index , ind , key){	
				this.$nextTick(()=>{
					this.baoList[index].brand_list[ind][key] = this.$geShi(e.detail.value)
				})
			},
			getInfo(){
				// 获取包裹闲情
				var data = {
					id:this.id
				}
				this.$wqzApi.Order_detail(data).then(res=>{
					// console.log(res , '返回信息')
					this.baoList[0].brand_list = res.data.brand
					this.baoList[0].province = res.data.province
					this.baoList[0].city = res.data.city
					this.baoList[0].area = res.data.area
					this.baoList[0].address = res.data.address
					this.baoList[0].area_name = res.data.area_name
					this.baoList[0].city_name = res.data.city_name
					this.baoList[0].province_name = res.data.province_name
					this.baoList[0].remark2 = res.data.remark2 //备注
					this.baoList[0].amount = res.data.amount //总价
					this.baoList[0].phone = res.data.phone //总价
					this.baoList[0].idcode = res.data.idcode //总价
					this.baoList[0].name = res.data.name //地址姓名
					this.baoList[0].clearance_type = res.data.clearance_type //地址姓名
					this.type_text = '原箱' //发货方式文字
					this.type = 1 //发货方式
					// console.log(this.baoList)	
					
				})
			},
			submitForm(type) {
				/**
					@type 1原箱 2开箱 3分箱 4合箱 5暂存
					@toast 提示内容
					@isOk 提交数据内容是否和规
					@time 2024年4月11日12:50:33
				*/
				var isOk = true
				var toast = '请完善包裹信息'
				try {
					// 循环检查数据额是否和规 并并给与提示
					if(this.type_text=='发货方式'){
						toast = '请选择发货方式'
						throw new Error(toast);
						return
					}
					this.baoList.forEach((item, index) => {
						for (var key in item) {
							if (!item[key]) {
								if (!item.province) {
									toast = this.type == 3 ? `请选择包裹${index+1}的邮寄地址` : '请选择邮寄地址'
									throw new Error(toast);
									return
								}
							}
						}
					})

				} catch (err) {
					isOk = false
				} finally {

				}
				if (!isOk) {
					uni.showToast({
						title: toast,
						icon: 'none'
					})
					return
				}
				var radioArr = []
				if (type == 1 || type == 2) {
					// 原箱开箱发货
					var data = {
						...this.baoList[0],
						transport_type:this.transport_type,
						order_id: this.id,
						shipping_type: type,
					}
					this.$wqzApi.kor_OrderInformation_information(data).then(res => {
						uni.showToast({
							title: '完善成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.redirectTo({
								url:`/pages/packageList/packageList_zh?current=2`
							})
						}, 1500)
					})
				}
			
				if(type==4){
					// 包裹合箱
					var data = {
						...this.baoList[0],
						order_id: this.id,
						transport_type:this.transport_type,
						shipping_type: type,
					}
					this.$wqzApi.kor_OrderInformation_combined_box(data).then(res=>{
						uni.showToast({
							title: '完善成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.redirectTo({
								url:`/pages/packageList/packageList_zh?type=${this.infoList[0].type}&current=2`
							})
						}, 1500)
					})
				}
				
			},
			open_pop(name) {
				this[name] = !this[name]
			},
			chooseAddress(ite, ind) {
				// 选择收货地址
				this.addressList.forEach((item, index) => {
					if (ind == index) {
						this.addressList[index].isChoose = true
						this.baoList[this.baoIndex].address = item.address
						this.baoList[this.baoIndex].city = item.city
						this.baoList[this.baoIndex].area = item.area
						this.baoList[this.baoIndex].province = item.province
						this.baoList[this.baoIndex].phone = item.phone
						this.baoList[this.baoIndex].name = item.name
						this.baoList[this.baoIndex].idcode = item.idcode
						this.baoList[this.baoIndex].zip_code = item.zip_code
						this.baoList[this.baoIndex].clearance_type = item.clearance_type
						this.address_pop_show = false
					} else {
						this.addressList[index].isChoose = false
					}
				})
			},
			getAddressList() {
				// 获取地址列表
				this.$wqzApi.kor_UserAddress_list({}).then(res => {
					res.data.list.forEach((item, index) => {
						res.data.list[index].isChoose = false
					})
					this.addressList = res.data.list
				})
			},
			chooseshipments(item) {
				// // console.log('选择发货方式' , item)
				var { type, text , pic} = item
				this.type_text = text
				this.transport_type = type
				this.baoIndex = 0
				this.fenHuo_pop_show = false
				this.img_url = pic
			},
			getList() {
				// 货物包裹信息
				var data = {
					id: this.id
				}
				this.$wqzApi.kor_Order_detail_combined(data).then(res => {
					// console.log(res)
					this.infoList = res.data
				})
			},
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import url(./complete.scss);
</style>